import { Link } from "react-router"
import FormFactory from "../../../components/FormFactory"
import AuthBox from "../AuthBox"
import { Button, Form } from "antd"
import { useMutation } from "@apollo/client"
import { AuthMutation } from "../../admin/login/page"
import gqlError from "../../../libs/gql-error"

const AuthLoginPage = () => {
  const [form] = Form.useForm()
  const [auth, { loading }] = useMutation(AuthMutation, {
    onCompleted({ auth }) {
      window.localStorage.setItem("token", auth)
      window.location.href = '/'
    },
    onError(error) {
      gqlError(error)
    },
  })

  return (
    <AuthBox
      title={(
        <div className="text-2xl">
          登录
        </div>
      )}
    >
      <FormFactory
        formProps={{
          onFinish: (variables: any) => {
            auth({
              variables
            })
          },
          form
        }}
        options={[
          {
            label: '登录账号',
            name: 'account',
            type: 'text',
            placeholder: '请输入账号',
            rules: [{ required: true, message: '请输入账号' }],
          },
          {
            label: '登录密码',
            name: 'password',
            type: 'password',
            placeholder: '请输入密码',
            rules: [{ required: true, message: '请输入密码' }],
          }
        ]}
      />
      <div className="flex justify-between">
        <Button loading={loading} type="primary" onClick={form.submit}>
          立即登录
        </Button>
        <Link to="/auth/userRegister">
          <Button type="link">
            立即注册
          </Button>
        </Link>
        {/* <Link to="/auth/forgot">
          <Button type="link">
            忘记密码
          </Button>
        </Link> */}
      </div>
    </AuthBox>
  )
}
export default AuthLoginPage